<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 400px;
        background-color: gray;
        border: 1px solid blue;
        /* overflow: hidden; */
      }
      /* 利用伪类元素达到最终解决办法，清除浮动产生的隐藏 */
      .outer::after {
        content: "";
        /* content: "";默认是行内元素，需要使用块元素才可以clear:both请求浮动 */
        display: block;
        clear: both;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: green;
        border: 1px solid red;
        margin: 10px;
      }
      .box1,
      .box2,
      .box3,
      .box4 {
        /* 浮动影响，父元素塌陷了 */
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box box1">1</div>
      <div class="box box2">2</div>
      <div class="box box3">3</div>
      <div class="box box4">4</div>
    </div>

    <!-- 输入lorem100 可以生成100个lorem -->
    <div style="background-color: coral">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi unde
      explicabo velit adipisci iste perferendis omnis ipsum nihil deserunt vero
      dolore, est tempore reprehenderit repudiandae enim natus, veniam sapiente
      in repellendus non beatae quaerat, nemo amet libero. Veniam repellat,
      animi sint provident deleniti cum iusto facere distinctio qui sit
      repudiandae aspernatur tenetur nesciunt ab nihil reprehenderit nulla
      dolore eius labore. Cum mollitia necessitatibus corporis fugit, et
      doloremque porro debitis facere ipsa obcaecati in dicta officia numquam
      veritatis doloribus non assumenda saepe. Deserunt excepturi recusandae
      dolores error, pariatur, dolorum tempora laudantium unde non perspiciatis,
      commodi eligendi velit voluptates ratione cum quae.icabo velit adipisci
      iste perferendis omnis ipsum nihil deserunt vero dolore, est tempore
      reprehenderit repudiandae enim natus, veniam sapiente in repellendus non
      beatae quaerat, nemo amet libero. Veniam repellat, animi sint provident
      deleniti cum iusto facere distinctio qui sit repudiandae aspernatur
      tenetur nesciunt ab nihil reprehenderit nulla dolore eius labore. Cum
      mollitia necessitatibus corporis fugit, et doloremque porro debitis facere
      ipsa obcaecati in dicta officia numquam veritatis doloribus non assumenda
      saepe. Deserunt excepturi recusandae dolores error, pariatur, dolorum
      tempora laudantium unde non perspiciatis, commodi eligendi velit
      voluptates ratione cum quae.
    </div>
  </body>
</html>
